<template>
    <div class="scan"  v-loading="loading"
         element-loading-text="正在查询同步账号..."
         element-loading-spinner="el-icon-loading"
         :style="{height: mainHeight+'px'}">
        <div class="scan-logo">
            <a></a>
        </div>
        <el-main class="wrapper">
            <section class="panel" >
                <div class="panel-body">
                    <div class="scan-body">
                        <p class="scan-title">安全保护</p>
                        <div class="scan-content">
                            <div class="scan-qrcode" v-if="qrcode">
                                <p>为保障帐号安全，请用微信扫码验证身份</p>
                                <img v-if="qrcode" :src="qrcode" alt="">
                                <div v-html="resultMsg"></div>
                            </div>
                            <div v-if="errorMsg">
                                <p class="scan-error">{{errorMsg}}</p>
                                <p>如管理员微信号已无法使用，你可以更换微信号</p>
                                <p>如需要更多帮助，可查看操作指引</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </el-main>

    </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    import {WechatScan,WechatCheck} from '../../utils/axios';
    export default {
        beforeCreate(){
            this.$store.dispatch('setLoading', true);
        },
        data() {
            return {
                qrcode:null,
                manager:null,
                errorMsg:null,
                resultMsg:"",
                id:this.$route.query.id,
            };
        },
        computed:{
            ...mapGetters(['loading','mainHeight']),
        },
        created(){

        },
        mounted(){
            this.qrcode = null;
            this.manager = null;
            this.errorMsg = null;
            this.resultMsg = '';
            this.getScan();
        },
        methods: {
            getScan(){
                setTimeout(()=>{
                    WechatScan({params:{id:this.id}}).then((response) => {
                        if(response.code){
                            this.errorMsg = response.msg;
                        }else{
                            this.$store.dispatch('setLoading', false);
                            this.qrcode = response.data.qrcode;
                            this.manager = response.data.manager;
                            this.errorMsg = null;
                            this.resultMsg = "<p>管理员与运营者微信号：可直接扫码登录</p>" +
                                "<p>其他微信号：扫码后需管理员("+this.manager+")验证登录</p>";
                            this.askScan();
                        }
                    });
                },500)
            },
            askScan(){
                var time = setInterval(() => {
                    WechatCheck({id:this.id}).then((res) => {
                        if(res.code){
                            this.$message.error(res.msg);
                        }else{
                            if(res.data.status == 4){
                                this.resultMsg = "<p><i class='scan-success'></i> 扫描成功</p><p>请在微信上进行后续操作</p>";
                            }
                            if(res.data.status == 1){
                                this.resultMsg = "<p><i class='scan-success'></i> 确认成功</p>";
                                clearInterval(time);
                                setTimeout(()=>{
                                    window.parent.wechatGo();
                                },2000)

                            }
                        }
                    });
                }, 2000);
            }
        }
    }
</script>